<template>
  <div>
    <div id="kruj-container">
      <section class="sec-01">
        <div class="back-holder">
          <div class="back-box" @click="goBack">
            <img src="../../../assets/img/wx/mode/back.png" />
          </div>
        </div>
        <div class="sec-01__title-box">
          <h4 class="sec-01__title-box__h4" flex="main:center cross:center">{{page.sec01.carName}}</h4>
          <headline :txt="page.sec01.text" :txtStyle="page.sec01.textStyle"></headline>
        </div>
        <div class="sec-01__content-box">
          <img class="bg-img" :src="page.sec01.bgImg">
          <img class="car-img" :src="page.sec01.carImg.img" :style="page.sec01.carImg.imgStyle">
        </div>
      </section>

      <section class="sec-02">
        <div class="sec-02__title-box">
          <headline :txt="page.sec02.text" :txtStyle="page.sec02.textStyle"></headline>
        </div>
        <div class="sec-02__content-box">
          <div class="sec-02__content-item-box" v-for="item in page.sec02.advantageList">
            <mode-content-item :num="item.num" :article="item.article"></mode-content-item>
            <img class="content-item-box__img" v-if="item.img" :src="item.img"/>
          </div>
        </div>
      </section>
      <section class="sec-03" flex="dir:top">
        <table-component :car-message="page.sec03.carMessage" :table-caption="page.sec03.tableCaption"></table-component>
      </section>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import Headline from "./headline"
  import ModeContentItem from "./mode-content-item"
  import TableComponent from "./table"

  export default {
    props:{
      page: {
        sec01: {
          carName: String,
          text: String,
          textStyle: Object,
          bgImg: {
            type: String,
            require: true
          },
          carImg: {
            type: String,
            require: true
          },
        },
        sec02:{
          text:String,
          textStyle: Object,
          advantageList: Array,
        },
        sec03:{
          tableCaption: String,
          carMessage: Array,
        }
      },
    },
    components: {
      Headline,
      ModeContentItem,
      TableComponent
    },
    data() {
      return {


      }
    },
    methods: {
        goBack(){
          this.$router.back();
        }
    },
    mounted: function () {
    }
  }
</script>

<style scoped lang="scss">
  #kruj-container {
    .sec-01 {
      color: #ffffff;
      height: 100vh;
      position: relative;
      .back-holder {
        padding: 23px 14px;
        position: relative;
        .back-box {
          width: 103px;
          height: 103px;
          padding: 23px 23px;
          position: absolute;
          z-index: 100;
          img {
            width: 100%;
            height: 100%;
          }
        }

      }
      .sec-01__title-box {
        position: relative;
        z-index: 10;
        margin-top: 188px;
        .sec-01__title-box__h4 {
          font-size: 46px;
          line-height: 49px;
          margin-bottom: 63px;
          font-weight: 500;
        }
      }

      .sec-01__content-box {
        position: absolute;
        top: 145px;
        left: 0;
        z-index: 1;
        .bg-img {
          width: 100%;
        }

        .car-img {
          position: absolute;
          left:170px;
          width: 415px;
          z-index: 1;
          bottom: 176px;
        }
      }
    }

    .sec-02 {
      .sec-02__content-box {
        padding: 140px 35px;
        .sec-02__content-item-box {
          margin-bottom: 117px;
          &:last-child {
            margin-bottom: 0;
          }

          .content-item-box__img {
            width: 100%;
            margin-top: 47px;
          }
        }
      }
    }
    .sec-03{
      width: 100vw;
    }

  }
</style>
